<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>UserList</title>
    <link rel="stylesheet" href="layui/css/layui.css" media="all">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.css" rel="stylesheet">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.js"></script>
    <script src="bootstrap/bootstrap-3.3.7-dist/js/jquery-3.5.1.min的副本 (1).js"></script>
    <style>
        .layui-table-cell {
            height: 60px;
            line-height: 60px;
        }
    </style>
</head>
<body>
<form class="layui-form layui-form-pane" action="" id="condition">
    <div class="layui-form-item" style="margin: 0px;margin-top: 10px;margin-left: 20px">
        <div id="deptDetail">
            <label class="layui-form-label">请选择部门</label>
            <div class="layui-input-inline">
                <select name="did" id="dept">
                    <option value="0" id="default"><--------  请选择  --------></option>
                </select>
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">员工姓名</label>
            <div class="layui-input-inline">
                <input type="text" name="likelyName" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">年龄范围</label>
            <div class="layui-input-inline" style="width: 100px;">
                <input type="text" name="startAge"  autocomplete="off" class="layui-input">
            </div>
            <div class="layui-form-mid">-</div>
            <div class="layui-input-inline" style="width: 100px;">
                <input type="text" name="endAge"  autocomplete="off" class="layui-input">
            </div>
        </div>
        <button type="button" data-type="reload" class="layui-btn" style="height: 43px" id="submit">查询</button>
        <button type="button" data-type="reset" class="layui-btn" style="height: 43px" id="reset">重置</button>
        <button type="button" data-type="add" class="layui-btn layui-btn-warm" style="height: 43px" id="add"><li class="layui-icon layui-icon-add-1">新增</li></button>
    </div>
</form>
<table class="layui-hide" id="test" lay-filter="test" style="margin: 0px">

</table>
<div id="empDetail" style="display: none;margin-left: 40px">
    <form class="layui-form layui-form-pane" action="" >
        <div class="layui-form-item" id="eid">
            <label class="layui-form-label">员工ID</label>
            <div class="layui-input-inline">
                <input type="text" name="eid" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">员工名字</label>
            <div class="layui-input-inline">
                <input type="text"  name="ename" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">年龄</label>
            <div class="layui-input-inline">
                <input type="text"  name="age" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item" id="dept3">
            <label class="layui-form-label">部门</label>
            <div class="layui-input-inline">
                <input type="text"  name="dept" autocomplete="off" class="layui-input">
            </div>
        </div>

    </form>
</div>
<script src="layui/layui.all.js"></script>
</body>
<script>
layui.use(['table','form'],function () {
    var table = layui.table;
    var list = [];
    var form = layui.$("#condition");
    table.render({
        elem:"#test",
        url:"/homework/emp/findAll",
        method:"post",
        id:"empTable",
        contentType:"application/json",
        parseData:function(res){
            res.code=0
            return {
            "code": res.code,
            "msg": res.msg, //解析提示文本
            "count": res.count, //解析数据长度
            "data": res.result//解析数据列表
            };
        },
        page: {
        layout: ['limit', 'count', 'prev', 'page', 'next', 'skip']
            ,limit:10
            ,limits:[5,10,15,20]
            ,groups: 2 //只显示 1 个连续页码
            ,first: "首页" //不显示首页
            ,last: "尾页" //不显示尾页
        }
        ,cols: [[
        {field:'eid', width:100, title: '员工ID', sort: true}
        ,{field:'ename', Width:100, title: '员工姓名'}
        ,{field:'age', width:100, title: '年龄',sort: true}
        ,{field:'age', width:100, title: '部门',sort: true,
            templet:function (emp) {
                return emp.dept.dname;
            }},
            {fixed: 'right', minWidth:200, align:'center', toolbar: '#barDemo'}
    ]]
    })

    table.on('tool(test)', function(obj){
        var data = obj.data;
        if(obj.event === 'detail'){
            layui.$("[name='age']").val(data.age);
            layui.$("[name='ename']").val(data.ename);
            layui.$("#eid").css("display","");
            layui.$("[name='eid']").val(data.eid);
            layui.$("[name='dept']").val(data.dept.dname);
            layui.form.render();
            layer.open({
                type:1,
                skin: "layui-layer-rim",
                area: ["400px", "400px"],    //范围大小
                title: "员工详细信息", //定义标题
                content:$("#empDetail"),
                btn:['关闭'],
                btn2:function () {
                    layer.closeAll();
                }
            })
        } else if(obj.event === 'del'){
            layer.confirm('真的删除么?', function(index){
                obj.del();
                layer.close(index);
                layui.$.ajax({
                    url:"/homework/emp/delByEid?eid="+data.eid,
                    type:"post",
                    dataType:"json",
                    success:function (data) {
                        if (data.code==0){
                            //调用注册的reload方法
                            active['reload'].call(this);
                        }
                    }
                })
            });
        } else if(obj.event === 'edit'){
            var html = layui.$("#deptDetail").html();
            layui.$("#dept3").html(html);
            layui.form.render('select');
            layui.$("[name='age']").val(data.age);
            layui.$("[name='ename']").val(data.ename);
            layui.$("[name='eid']").val(data.eid);
            layui.$("#eid").css("display","none");
            layui.$("#dept3 option").each(function () {
                $(this).prop("selected",data.dept.did==$(this).val())
            })
            layui.form.render('select');
            layer.open({
                type:1,
                skin: "layer-layer-rim",
                title: "修改信息", //定义标题
                content:$("#empDetail"),
                area: ["400px", "350px"],
                btn:['提交','取消'],
                btn2:function () {
                    layer.closeAll();
                },
                yes:function () {
                    var emp = {};
                    var dept = {};
                    emp.age = layui.$("[name='age']").val();
                    emp.ename = layui.$("[name='ename']").val();
                    emp.eid =layui.$("[name='eid']").val();
                    dept.did = layui.$("#dept3 select").val();
                    emp.dept = dept;
                    layui.$.ajax({
                        url:"/homework/emp/updateEmp",
                        data:JSON.stringify(emp),
                        contentType: "application/json",
                        type:"post",
                        success:function (data) {
                            if (data.code==0){
                                layer.closeAll();
                                active['reload'].call(this);
                            }
                        }
                    })
                }
            })
        }
    });

    //动态渲染选择框
    layui.$.ajax({
        url:"/homework/dept/findAll",
        type:"post",
        dataType:"json",
        success:function (data) {
            list = data.result;
            $.each(list,function (index,dept) {
                $("#dept").append(new Option(dept.dname,dept.did));
            })
            layui.form.render("select");
        }
    })

    var $=layui.$,active={
        reload:function () {
            var did = $("#dept").val();
            var likelyName = $("[name='likelyName']").val();
            var startAge = $("[name='startAge']").val();
            var endAge = $("[name='endAge']").val();
            table.reload('empTable',{
                where:{
                    did:did,
                    likelyName:likelyName,
                    startAge:startAge,
                    endAge:endAge,
                }
            })
        },
        add:function () {
            var html = layui.$("#deptDetail").html();
            layui.$("#dept3").html(html);
            layui.$("#eid").css("display","none");
            layui.$("[name='age']").val("");
            layui.$("[name='ename']").val("");
            layui.$("#dept3 select").val(0);
            layui.form.render();
            layer.open({
                type:1,
                skin: "layui-layer-rim",
                area: ["400px", "400px"],    //范围大小
                title: "新增员工", //定义标题
                content:$("#empDetail"),
                btn:['提交','取消'],
                btn2:function () {
                    layer.closeAll();
                },
                yes:function () {
                    var emp = {};
                    var dept = {};
                    emp.age = layui.$("[name='age']").val();
                    emp.ename = layui.$("[name='ename']").val();
                    dept.did = layui.$("#dept3 select").val();
                    emp.dept = dept;
                    if (emp.ename==null||emp.ename==""){
                        layer.msg("名字不能为空");
                        return ;
                    }
                    if (!(emp.age>18&&emp.age<90)){
                        layer.msg("年龄填写有误");
                        return ;
                    }
                    if (dept.did==0){
                        layer.msg("请选择部门");
                        return ;
                    }
                    layui.$.ajax({
                        url:"/homework/emp/addEmp",
                        data:JSON.stringify(emp),
                        dataType:"json",
                        contentType:"application/json",
                        type:"post",
                        success:function (data) {
                            if (data.code == 0){
                                layer.closeAll();
                                active['reload'].call(this);
                            }
                        }
                    })
                }
            })
        }
    }
    $('#submit').on('click', function(){
        var type = $(this).data('type');
        active[type] ? active[type].call(this) : '';
    });
    $('#reset').on('click', function(){
        $("#default").prop("selected",true);
        layui.form.render("select");
        $("[name='likelyName']").val("");
        $("[name='startAge']").val("");
        $("[name='endAge']").val("");
        active['reload'].call(this);
    });

    $("#add").on('click',function () {
        var type = $(this).data('type');
        active[type] ? active[type].call(this) : '';
    })
})

</script>
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-normal" lay-event="detail">查看</a>
    <a class="layui-btn layui-btn-warm" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger" lay-event="del">删除</a>
</script>
</html>